<template>
    <a-modal
      width="900px"
      :bodyStyle="{ height: '550', overflow: 'auto' }"
      :visible="modalVisible"
      @cancel="handleCancel"
      :title="labelTitle"
    >
      <a-form-model ref="caseHandleDelay" :rules="rules" :model="infoForm">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案由" prop="cause" >
          <a-textarea
            v-model="infoForm.cause"
            allow-clear
            :maxLength="3000"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            placeholder="请输入案由"
          />
        </a-form-model-item>
  
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="延期日期" prop="extensionday" >
          <a-date-picker
            v-model="infoForm.extensionday"
            placeholder="请选择延期日期"
            :disabled-date="disabledDate"
            :defaultPickerValue="defaultPickerDate" 
            format="YYYY-MM-DD"
            :allowClear="true"
          />
        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="其他当事人" prop="party" >
            <a-input v-model="infoForm.party" placeholder="请输入其他当事人" allowClear />
        </a-form-model-item>


        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="延期原因" prop="reason" >
          <a-textarea
            v-model="infoForm.reason"
            allow-clear
            :maxLength="3000"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            placeholder="请输入延期原因"
          />
        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="申请意见" prop="describe" >
          <a-textarea
            v-model="infoForm.describe"
            allow-clear
            :maxLength="3000"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            placeholder="请输入申请意见"
          />
        </a-form-model-item>

      </a-form-model>
      
  
      <template slot="footer">
        <div style="display: flex; justify-content: center">
          <a-button style="margin-right: 20px" @click="handleCancel"> 取消 </a-button>
          <a-button type="primary" icon="save" @click="onSubmit" :loading="loading"> 提交 </a-button>
        </div>
      </template>
    </a-modal>
  </template>
  <script>
  import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype'
  import { startBusinessProced, getWeekdayDeadline } from '@/api/accept/business_Approve'
  import moment from 'moment'
  import {CaseHandleMixin} from  '@/views/handleCase/CaseHandleMixin'
  export default {
    mixins: [CaseHandleMixin],
    data() {
      return {
        infoForm: {
          applyid: '', // applyid
          proctype: '', // 操作分类
          userid: '',
          username: '',
          processinstanceid: '',
          cause: '', // 案由
          describe: '', // 行政复议申请
          extensionday: undefined, // 延期日期
          party: '', // 其他当事人
          reason: '' // 延期原因
        },
        rules: {
          cause: [
            { required: true, message: '请输入案由', trigger: 'blur' },
            { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
          ],
          describe: [
            { required: true, message: '请输入申请意见', trigger: 'blur' },
            { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
          ],
          reason: [
            { required: true, message: '请输入延期原因', trigger: 'blur' },
            { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
          ],
          party: [
            { required: true, message: '请输入其他当事人', trigger: 'blur' }
          ],
          extensionday: [{ required: true, message: '请选择延期日期', trigger: 'change' }]
        },
        endDate: undefined, // 截止时间
        dealLineDate: undefined, // 限制时间
        defaultPickerDate: undefined // 默认面板时间
      }
    },
    created() {
      this.getDeadTimeLine();
    },
    methods: {
      init() {
        this.modalVisible = true
        this.labelTitle = "延期申请"
        this.resetForm()
        this.infoForm.cause = this.reason;
      },
      handleCancel() {
        this.resetForm()
        this.modalVisible = false
      },
      resetForm() {
        this.$nextTick(() => {
            this.$refs.caseHandleDelay.resetFields()
        })
      },
      async getDeadTimeLine() {
        await getWeekdayDeadline({"applyid": this.applyid,"days": 30}).then((res) => {
          // debugger
          if (res.code !== 0) {
            this.$message.error('操作失败')
            this.dealLineDate = moment(new Date()).add(30, 'days');
          } else {
            // 截止时间
            this.endDate = moment(res.data.endDate);
            // 限制时间
            this.dealLineDate = moment(res.data.dealLineDate);
            this.defaultPickerDate = moment(res.data.endDate);
          }
        })
      },
      disabledDate(current) {
        return !(current && current >= this.endDate && current <= this.dealLineDate);
      },

      /**
       * 提交表单
       */
      onSubmit() {
        this.$refs.caseHandleDelay.validate((valid) => {
          this.loading = true
          if (valid) {
            console.log('submit!', this.infoForm)
            let params = {
              applyid: this.applyid, // applyid
              proctype: this.proctype, // 操作分类
              userid: this.currentUser.userId,
              username: this.currentUser.fullname,
              processinstanceid: this.processinstanceid, // 流程实例id
              cause: this.infoForm.cause, // 案由
              describe: this.infoForm.describe, // 行政复议申请
            }
            let extensionday = this.infoForm.extensionday.format('YYYY年MM月DD日');
            let docfield = {
                party: this.infoForm.party, // 其他当事人
                extensionday: extensionday, // 延期日期
                reason: this.infoForm.reason  // 延期原因
            }
            console.log('入参参数：' + params)
            startBusinessProced(params, docfield).then((res) => {
              if (res.code !== 0) {
                this.$message.error('操作失败')
              } else {
                this.$message.success('操作成功')
                this.$emit('reload')
                this.$emit('close')
                this.modalVisible = false
                this.autoToSonRouter(res.data)
              }
              this.loading = false
            })
          } else {
            this.loading = false
            // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
            // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
            setTimeout(() => {
              const isError = document.getElementsByClassName('has-error')
              const input = isError[0].querySelector('input')
              //console.log(input)
              if (input !== null && input !== 'undefind' && input !== '') {
                isError[0].querySelector('input').focus()
                  ? isError[0].querySelector('input').focus()
                  : isError[0].querySelector('input').click()
              } else {
                isError[0].querySelector('textarea').focus()
              }
            }, 10)
            return false
          }
        })
      },
    },
  }
  </script>
      
  <style lang="scss" scoped></style>
          